<template>
  <div >
    <div class="center">
      <div class="inp">
        <input type="text" v-model="username" placeholder="请输入用户名">
        <br>
        <input type="password" v-model="password" placeholder="请输入密码">
      </div>
      <div class="forMessage">
        <p class="remeberMe"><input type="checkbox" ref="remeber" @click="remeber">&nbsp;记住我</p>
        <p class="forgetPassword" @click="forgetPwd">忘记密码？</p>
      </div>
      <div  class="logindiv">
        <button type="button" class="login mui-btn"  data-loading-text="登录中..." data-loading-icon="">
          <span class="logintext">登录</span>
        </button>
      </div>
    </div>
    <!-- <div class="login-icon" :class="{active:loginFlag}"> -->
      <Logining :loginFlag='loginFlag'></Logining>
    <!-- </div> -->
  </div>
</template>

<script>
  // import { Toast } from 'mint-ui'
  import {mapActions, mapMutations} from 'vuex'
  import {SET_CURRENT_LOGIN_USER} from '../../store/mutation-types'
  import Logining from './Logining'
  export default {
    data() {
      return {
        username: '',
        password: '',
        loginFlag: false
      }
    },
    created() {
       this.loginFlag = false
    },
    mounted() {
      // console.log(this.$refs.remeber.checked)
      // this.remeberLast()
      // this.loginFlag = false
      this.login()
    },
    components: {
      Logining
    },
    methods: {
      ...mapMutations({setCurrentLoginUser: SET_CURRENT_LOGIN_USER}),
      ...mapActions(['getDbMessageListA', 'setAddFriendsPost']),
      login() {
        var self = this
        self.$immui('.center').on('tap', '.login', function(e) {
          // self.$immui(this).button('loading')
          // console.log(self.username)
          // 登录按钮函数，这里先对用户输入的内容进行验证
          if (!self.username) {
            // Toast({message: '用户名不能为空', duration: 1000})
            self.$immui.toast('用户名不能为空', {duration: 'short', type: 'div'})
            // console.log(123)
          } else if (!self.password) {
            self.$immui.toast('密码不能为空', {duration: 'short', type: 'div'})
          } else {
/*
            let message = {
              from: 'cwf41',
              to: 'cwf40',
              fromJid: '1105181206098244#mini-chat_cwf40@easemob.com',
              toJid: 'cwf41',
              type: 'String',
              chatroom: false,
              status: 'String',
              code: null,
              presence_type: '',
              original_type: 'String',
              read: false,
              agree: false
            }
            // let data = {username: self.username, message: message}
            self.setAddFriendsPost(message)
            */
            self.loginFlag = true
            let userInfo = {
              username: self.username,
              password: self.password,
              nickname: self.username
            }
            // 获取用户的聊天信息列表，以及获取用户的收到的添加好友的信息
            self.getDbMessageListA({username: self.username})
          // 获取已经deng录的用户 稍后把这里弄成action
            self.axios.post('/api/login/getLogin', userInfo)
                .then((response) => {
                  // 响应成功回调
                  console.log(response, '获取到当前登录的用户')
                  self.setCurrentLoginUser(userInfo)
                })
                .catch(err => console.log(err, '获取到当前登录的用户或者创建当前登录用户失败'))
            setTimeout(() => {
              // self.$immui(this).button('reset')
              self.loginFlag = false
              self.username = ''
              self.password = ''
              self.$router.push('/messageview')
            }, 1000)
          }
        })
      /*
        // 使用token登录
        var options = {
          apiUrl: WebIM.config.apiURL,
          user: 'username',
          accessToken: 'token',
          appKey: WebIM.config.appkey
        };
        conn.open(options);
      */
      },
      remeberLast() {
        // 页面渲染的时候先判断是否有上一个用户的记住密码，如果有的话，自动勾选记住密码
      },
      remeber() {
        // 记住密码选项
      },
      forgetPwd() {
        // Toast('请重新注册，并且使用与之前不同的用户名')
      }
    }
  }
</script>

<style lang="scss" scoped>
// .login-icon{
//   display: none;
//   &.active{
//     display: block;
//   }
// }
.center{
    width: 100%;
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    z-index: 20;
    .inp{
      width: 100%;
      flex: 0 0 25%;
      /*min-height: 100px;*/
      display: flex;
      flex-direction: column;
      font-size: 20px;
      text-align: center;
      box-sizing: border-box;
      padding-top: 10px;
      input[type='text']{
        flex: 1;
        padding-left: 10px;
        background-color: rgb(250, 255, 189) !important;
        border-style: none;
        outline: none;
        margin-bottom: 0;
      }
      input[type='password']{
        flex: 1;
        box-sizing: border-box;
        padding-left: 10px;
        background-color: rgb(250, 255, 189) !important;
        border-style: none;
        outline: none;
        margin-bottom: 0;
      }
    }
    .forMessage{
      flex: 0 0 10%;
      display: flex;
      justify-content: space-between;
      padding-top: 20px;
      box-sizing: border-box;
      font-size: 14px;
      height: 50px;
      line-height: 50px;
      .remeberMe{
        flex: 1;
        text-align: left;
        input[type='checkbox']{}
      }
      .forgetPassword{
        flex: 1;
        text-align: right;
      }
    }
    .logindiv{
      width: 100%;
      flex: 1 ;
      min-height: 280px;
      position: relative;
      bottom: 0;
      left: 0;
      .login{
        position: absolute;
        left: 0;
        top: 5px;
        right: 0;
        bottom: 0;
        margin:auto;
        width: 100%;
        height: 20%;
        font-size: 25px;
        display: inline-block;
        vertical-align: middle;
        background: #fe7300;
        text-align: center;
        color: rgba(255,255,255,0.8);
        .logintext{
          height: 25px;
          display: inline-block;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
        }
      }
    }
  }
</style>
